<template>
  <div class="wrap">
    <div class="org-name">
      {{orgName}}
      <el-button v-if="orgName != null" type="danger" @click="clearOrgScore">清空本机构评分</el-button>
    </div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="item.itemId"
      :class="item.finished ? 'finished': ''"
    >
      <div class="item-title">
        {{index+ 1}}. {{item.itemName}}(满分：{{item.itemTotalScore}}分)
        <el-button type="danger" @click="clearScore(item.itemId)">清空评分</el-button>
      </div>
      <div class="item-desc" v-show="item.itemDesc != null">评分项描述：{{item.itemDesc}}</div>
      <div class="single-option" v-if="item.itemType === 1">
        <el-select
          v-model="item.selectedOptionId"
          placeholder="请选择"
          @change="makeMark(item.itemId, item.selectedOptionId)"
        >
          <el-option
            v-for="option of item.scoreModelItemOptionVoList"
            :key="option.id"
            :label="option.label"
            :value="option.id"
          ></el-option>
        </el-select>
      </div>
      <div class="direct" v-if="item.itemType === 0">
        <el-slider
          v-model="item.score"
          show-input
          :max="item.itemTotalScore"
          @change="makeMark(item.itemId, item.score)"
        ></el-slider>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSingleScoreMark,
  setScoreMark,
  clearScoreOrgTaskItem,
  clearScoreOrgItem
} from "@/api/score.js";
import { Select, Option, Slider, Button } from "element-ui";
export default {
  name: "score-item",
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Slider.name]: Slider,
    [Button.name]: Button
  },
  props: {
    orgId: Number,
    taskId: Number | String,
    orgName: String
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    refreshMark() {
      if (this.orgId == null || this.taskId == null || this.orgName == null) {
        this.list = [];
        return;
      }
      getSingleScoreMark({
        taskId: this.taskId,
        orgId: this.orgId
      })
        .then(res => {
          this.list = res;
          this.list.forEach(item => {
            if (item.itemType === 1) {
              let optionList = item.scoreModelItemOptionVoList;
              optionList.forEach(optionItem => {
                optionItem.label = `${optionItem.optionName}(${optionItem.optionScore}分)`;
                if (optionItem.optionDesc != null) {
                  optionItem.label += `-备注：${optionItem.optionDesc}`;
                }
              });
            }
          });
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    makeMark(itemId, value) {
      setScoreMark({
        taskId: this.taskId,
        orgId: this.orgId,
        itemId: itemId,
        value: value
      })
        .then(res => {
          this.refreshMark();
          this.$emit("mark");
        })
        .catch(errMsg => {
          this.refreshMark();
          this.$alert(errMsg.msg);
        });
    },
    clearOrgScore() {
      this.$confirm("此操作将永久清空本机构评分, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          clearScoreOrgTaskItem({
            taskId: this.taskId,
            orgId: this.orgId
          })
            .then(res => {
              this.refreshMark();
              this.$emit("mark");
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    clearScore(itemId) {
      this.$confirm("此操作将永久清空本评分, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          clearScoreOrgItem({
            taskId: this.taskId,
            orgId: this.orgId,
            itemId: itemId
          })
            .then(res => {
              this.refreshMark();
              this.$emit("mark");
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    }
  },
  watch: {
    orgId() {
      this.refreshMark();
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .org-name {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #ccc;
    cursor: default;
  }

  .item {
    margin-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;

    &:hover {
      background-color: #ccc;
    }

    &.finished {
      background-color: #67C23A;
    }

    .item-title {
      font-size: 20px;
      margin-bottom: 3px;
    }

    .item-desc {
      font-size: 18px;
      padding-left: 5px;
      margin-bottom: 10px;
    }

    .single-option {
      padding-left: 5px;
    }

    .direct {
      width: 400px;
    }
  }
}
</style>